<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生详情 | 25级计应3班官网</title>
    <!-- 建议使用CDN引入，确保路径正确 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 (与index.html保持一致) -->
    <nav id="navbar" class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300 py-3">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <span class="font-bold text-xl text-dark">25级计应3班官网</span>
            </a>
            <div class="hidden md:flex items-center space-x-6">
                <a href="index.html#home" class="nav-link font-medium hover:text-primary transition-colors">首页</a>
                <a href="index.html#students" class="nav-link font-medium hover:text-primary transition-colors">学生作品</a>
                <a href="index.html#about" class="nav-link font-medium hover:text-primary transition-colors">关于课程</a>
            </div>
            <button class="md:hidden text-gray-700" id="menu-toggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
        <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="index.html#home" class="py-2 hover:text-primary transition-colors">首页</a>
                <a href="index.html#students" class="py-2 hover:text-primary transition-colors">学生作品</a>
                <a href="index.html#about" class="py-2 hover:text-primary transition-colors">关于课程</a>
            </div>
        </div>
    </nav>

    <!-- 页面容器 -->
    <div class="page-container pt-24 pb-16">
        <section id="student-detail" class="min-h-screen">
            <div class="container mx-auto px-4">
                <!-- 加载提示 -->
                <div id="loading" class="text-center py-20">
                    <i class="fa fa-circle-o-notch fa-spin text-3xl text-primary mb-4"></i>
                    <p>正在加载学生信息...</p>
                </div>

                <!-- 学生详情内容 (将由JS动态生成) -->
                <div id="student-content" class="hidden">
                    <!-- 导航按钮和标题 -->
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-10 gap-4">
                        <a href="index.html#students" class="back-link flex items-center text-primary hover:underline">
                            <i class="fa fa-arrow-left mr-2"></i>
                            <span>返回学生列表</span>
                        </a>
                        <div class="flex space-x-2">
                            <button id="prev-btn" class="student-nav-btn p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" title="上一位学生">
                                <i class="fa fa-chevron-left"></i>
                            </button>
                            <button id="next-btn" class="student-nav-btn p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" title="下一位学生">
                                <i class="fa fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 学生信息卡片 -->
                    <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
                        <div class="md:flex" id="student-card-container">
                            <!-- 左侧信息和右侧作品将由JS填充 -->
                        </div>
                    </div>
                </div>
                
                <!-- 错误提示 -->
                <div id="error" class="hidden bg-white rounded-2xl shadow-lg overflow-hidden p-8 text-center">
                    <div class="max-w-2xl mx-auto">
                        <i class="fa fa-exclamation-triangle text-6xl text-yellow-500 mb-6"></i>
                        <h2 class="text-2xl font-bold mb-4">学生信息未找到</h2>
                        <p class="text-gray-600 mb-8">
                            可能是学生ID不正确或数据文件加载失败。
                        </p>
                        <a href="index.html#students" class="inline-block bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-colors">
                            返回学生列表
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });

        // 获取URL中的学生ID
        const urlParams = new URLSearchParams(window.location.search);
        const studentId = urlParams.get('id');

        // 学生数据数组
        let students = [];

        // 当DOM加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            if (!studentId) {
                showError();
                return;
            }

            // 从JSON文件加载数据
            fetch('students.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(data => {
                    students = data;
                    const student = students.find(s => s.id == studentId);
                    if (student) {
                        displayStudentDetails(student);
                    } else {
                        showError();
                    }
                })
                .catch(error => {
                    console.error('加载学生数据失败:', error);
                    showError();
                });
        });

        // 显示学生详情
        function displayStudentDetails(student) {
            const container = document.getElementById('student-card-container');
            
            // 生成技能标签HTML
            const skillsHtml = student.skills.map(skill => 
                `<span class="bg-white/20 px-3 py-1 rounded-full text-sm">${skill}</span>`
            ).join('');

            // 生成联系方式HTML
            const contactHtml = student.contact.map(contact => 
                `<a href="${contact.url}" class="flex items-center text-white/90 hover:text-white transition-colors">
                    <i class="fa fa-${contact.type} w-6"></i>
                    <span>${contact.text}</span>
                </a>`
            ).join('');
            
            // 生成作品列表HTML
            let projectsHtml = '<p class="text-gray-600">该同学暂无作品。</p>';
            if (student.projects && student.projects.length > 0) {
                projectsHtml = student.projects.map(project => `
                    <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                        <div class="h-48 bg-gray-100"><img src="${project.image}" alt="${project.title}预览" class="w-full h-full object-cover"></div>
                        <div class="p-6">
                            <h4 class="text-xl font-bold mb-2">${project.title}</h4>
                            <p class="text-gray-600 mb-4">${project.description}</p>
                            <a href="${project.url}" target="_blank" class="inline-flex items-center text-primary hover:underline">查看作品 <i class="fa fa-external-link ml-1"></i></a>
                        </div>
                    </div>`).join('');
            }

            // 填充左侧和右侧内容
            container.innerHTML = `
                <!-- 左侧：个人信息 -->
                <div class="md:w-1/3 ${student.gradientClass || 'bg-gradient-to-br from-primary to-accent'} p-8 text-white">
                    <div class="text-center mb-8">
                        <img src="${student.avatar}" alt="${student.name}的头像" class="w-48 h-48 rounded-full object-cover border-4 border-white/30 mx-auto mb-4">
                        <h2 class="text-3xl font-bold">${student.name}</h2>
                        <p class="text-white/80 mt-1">${student.title}</p>
                    </div>
                    <div class="space-y-6">
                        <div><h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">个人简介</h3><p class="text-white/90">${student.bio}</p></div>
                        <div><h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">技能</h3><div class="flex flex-wrap gap-2">${skillsHtml}</div></div>
                        <div><h3 class="text-lg font-semibold mb-3 border-b border-white/20 pb-2">联系方式</h3><div class="space-y-2">${contactHtml}</div></div>
                    </div>
                </div>
                <!-- 右侧：作品展示 -->
                <div class="md:w-2/3 p-8">
                    <h3 class="text-2xl font-bold mb-6">我的作品</h3>
                    <div class="space-y-8">${projectsHtml}</div>
                </div>
            `;

            // 设置上一个和下一个学生的导航
            const currentIndex = students.findIndex(s => s.id == student.id);
            const prevId = students[(currentIndex - 1 + students.length) % students.length].id;
            const nextId = students[(currentIndex + 1) % students.length].id;
            
            document.getElementById('prev-btn').onclick = () => navigateToStudent(prevId);
            document.getElementById('next-btn').onclick = () => navigateToStudent(nextId);
            
            // 显示内容，隐藏加载提示
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('student-content').classList.remove('hidden');
        }

        // 导航到指定学生页面
        function navigateToStudent(id) {
            window.location.href = `student.html?id=${id}`;
        }

        // 显示错误信息
        function showError() {
            document.getElementById('loading').classList.add('hidden');
            document.getElementById('error').classList.remove('hidden');
        }
    </script>
</body>
</html>